<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录测试 - 使用正确密码</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        h1 {
            color: #333;
            text-align: center;
        }
        .container {
            background-color: #f5f5f5;
            padding: 20px;
            border-radius: 8px;
            margin: 20px 0;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 10px;
        }
        button:hover {
            background-color: #45a049;
        }
        input[type="text"], input[type="password"] {
            padding: 10px;
            width: 100%;
            margin-bottom: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        .result {
            margin-top: 20px;
            padding: 10px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 4px;
            max-height: 300px;
            overflow-y: auto;
        }
        .success {
            color: green;
        }
        .error {
            color: red;
        }
        .info {
            color: blue;
        }
        pre {
            white-space: pre-wrap;
            word-wrap: break-word;
        }
    </style>
</head>
<body>
    <h1>登录测试 - 使用正确密码</h1>
    
    <div class="container">
        <h2>用户登录</h2>
        <p>测试使用正确的用户名和密码登录</p>
        
        <div>
            <label for="username">用户名：</label>
            <input type="text" id="username" value="admin" placeholder="请输入用户名">
        </div>
        
        <div>
            <label for="password">密码：</label>
            <input type="password" id="password" value="admin123" placeholder="请输入密码">
        </div>
        
        <button id="loginBtn">登录</button>
        
        <div id="loginResult" class="result">
            登录状态将显示在这里...
        </div>
        
        <div>
            <h3>详细结果</h3>
            <div id="detailedResult" class="result">
                详细信息将显示在这里...
            </div>
        </div>
    </div>

    <script>
        // DOM元素
        const loginBtn = document.getElementById('loginBtn');
        const loginResult = document.getElementById('loginResult');
        const detailedResult = document.getElementById('detailedResult');
        
        // 显示结果
        function showResult(element, message, type = 'info') {
            const typeClass = type === 'success' ? 'success' : type === 'error' ? 'error' : 'info';
            element.innerHTML = `<p class="${typeClass}">${message}</p>`;
        }
        
        // 显示详细信息
        function showDetailedInfo(info) {
            detailedResult.innerHTML = `<pre>${JSON.stringify(info, null, 2)}</pre>`;
        }
        
        // 登录功能
        function login() {
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            
            showResult(loginResult, '正在登录...');
            showDetailedInfo({ status: 'logging_in', message: '正在发送登录请求' });
            
            fetch('http://localhost:8080/auth/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    username: username,
                    password: password
                })
            })
            .then(response => {
                const statusInfo = {
                    statusCode: response.status,
                    statusText: response.statusText,
                    headers: {}
                };
                
                // 收集响应头信息
                response.headers.forEach((value, key) => {
                    statusInfo.headers[key] = value;
                });
                
                showDetailedInfo(statusInfo);
                
                if (response.ok) {
                    return response.json();
                } else {
                    throw new Error(`HTTP错误: ${response.status}`);
                }
            })
            .then(data => {
                showResult(loginResult, `登录成功！欢迎 ${username}`, 'success');
                
                // 保存token到localStorage
                if (data.token) {
                    localStorage.setItem('token', data.token);
                    data.tokenSaved = true;
                }
                
                showDetailedInfo(data);
            })
            .catch(error => {
                showResult(loginResult, `登录失败: ${error.message}`, 'error');
                showDetailedInfo({ error: error.message });
            });
        }
        
        // 绑定事件监听器
        loginBtn.addEventListener('click', login);
        
        // 页面加载时检查localStorage
        window.addEventListener('load', () => {
            const storedToken = localStorage.getItem('token');
            if (storedToken) {
                showResult(loginResult, 'localStorage中存在Token，请点击登录按钮测试新的登录', 'info');
                showDetailedInfo({
                    tokenExists: true,
                    tokenLength: storedToken.length,
                    tokenPreview: storedToken.substring(0, 20) + '...'
                });
            }
        });
    </script>
</body>
</html>